<template>
  <!-- 运行结果-查看源数据 -->
  <div class="source-data">
    <el-row class="ruleResult container">
      <el-col style="margin-right:10px;" class="content-left">
        <!-- 操作区域 -->
        <upper-template exportIcon :searchIcon="false" :configIcon="false" @exportData="exportFiles">
          <!-- 显示隐藏区 -->
          <!-- <template slot="columnHide">
            <el-checkbox-group v-model="checkSourceList">
              <el-checkbox
                v-for="item in textSourceData"
                :label="item.label"
                :key="item.prop"
                >{{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </template> -->
        </upper-template>
        <div style="height:400px">
          <el-table ref="multipleSourceTable" :data="tableSourceData" style="width: 100%">
            <el-table-column v-for="(item ,index) in this.headData"
              :key="index"
              :prop="item.columnEn.toLowerCase()"
              :label="item.columnCn">
            </el-table-column>
          </el-table>
          <pagination
            @size-change="handleSourceSizeChange"
            @current-change="handleSourceCurrentChange"
            :current-page="searchSourceForm.page"
            :page-size="searchSourceForm.size"
            @refresh="searchSourceFunc"
            :total="sourceTotal"
          ></pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ruleResult } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue"
import onlyOneSearch from "@/components/onlyOneSearch";
import moment from "moment";
export default {
  data() {
    return {
      // 列隐藏依据数据
      //textSourceData: [],
      // 显示的列
      //checkSourceList: [],
      //查询时默认条件
      searchSourceForm: {
        page: 1,
        size: 15
      },
      //总条数
      sourceTotal: 0,
      tableSourceData: [],
      headData: [],
      dataDetail:""
    };
  },
  props: {
    ruleCode: {
      type: String,
      default: ""
    },
    activeName: {
      type: String,
      default: ""
    }
  },
  watch: {
    ruleCode: function(newVal, oldVal) {
      this.ruleCode = newVal;
      //newVal&&this.searchSourceFunc();
    },
    activeName: function(newVal, oldVal) {
      this.activeName = newVal;
      if (this.activeName == 'sourceDataModel') {
        this.searchSourceFunc();
      }
    }
  },
  components: {
    onlyOneSearch
  },
  created() {
    //初始化显示的列
    //this.checkSourceListInit();
  },
  computed: {
    columnSourceState() {
      // let arr = [],
      //   arr1 = this.textSourceData,
      //   arr2 = this.checkSourceList;
      // for (let i = 0; i < arr1.length; i++) {
      //   let flg = false;
      //   for (let j = 0; j < arr2.length; j++) {
      //     if (arr1[i].label === arr2[j]) {
      //       flg = true;
      //     }
      //   }
      //   arr.push(flg);
      // }
      // return arr;
    },
    ruleCodeStatus: function() {
      return this.ruleCode;
    },
    activeNameStatus: function() {
      return this.activeName;
    }
  },
  mounted() {
    this.searchSourceFunc()
  },
  methods: {
    checkSourceListInit() {
      this.checkSourceList = this.headData.map(v => {
        return v.columnCn;
      });
    },
    searchSourceFunc() {
      this.headData = [];
      this.tableSourceData = [];
      let data= {
        ruleCode:this.ruleCode
      }
      ruleResult.querySourceColumns(data).then(res => {
        if (res.code === 200) {
          this.headData = res.datas;
          if(res.datas != null&&res.datas != undefined) {
            this.dataDetail = "";
            res.datas.forEach(item=>{
              this.dataDetail = this.dataDetail + item.columnEn + ",";
            });
            this.dataDetail = this.dataDetail.substr(0,this.dataDetail.length-1);
            let detailData = {
              ruleCode:this.ruleCode,
              cols:this.dataDetail,
              ...this.searchSourceForm
            }
            ruleResult.querySourceShowData(detailData).then(res => {
              if (res.code === 200) {
                this.tableSourceData = res.datas.rows;
                this.sourceTotal = res.datas.total;
              }
            });
          }
        }
      });
    },
    // 数据展示导出
    exportFiles(){
      let params = {
        cols:this.dataDetail,
        ruleCode: this.ruleCode
      }
      ruleResult.exportFile(params).then((response) => {
        if(response.code==500&&response.message=="2") {
          this.$message.error('执行SQL查询数据错误');
        } else if (response) {
          var filename = decodeURI(response.headers['content-disposition']).split('=')[1];
          var blob = new Blob([response.data],{
            type: "application/vnd.ms-excels;charset=utf-8"
          });
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob,filename);
          } else {
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          }
        } else {
          this.$message.error(res.message || '获取失败');
        }
      })
    },
    handleSourceSizeChange(val) {
      this.searchSourceForm.size = val;
      console.log(val, "每页数");
      this.searchSourceFunc();
    },
    handleSourceCurrentChange(val) {
      this.searchSourceForm.page = val;
      console.log(val, "当前页");
      this.searchSourceFunc();
    }
  }
};
</script>

<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
</style>